<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  	<div class="panel-heading title"></div>
	<div class="layui-card-body">
	
	</div>
</div>

<div class="table_div" style="">
  <div id="searchParam">
    
  </div>
  <br>
  <div class="layui-form-item">
      
      <div class="layui-input-inline">
      	<button class="layui-btn" id="template">表格模板下载</button>
      </div>
      
      <div class="layui-input-inline">
      	<button class="layui-btn" id="import">导入表格计算</button>
      </div>
      
      <div class="layui-input-inline">
        <input type="text" id="diesel" disabled="disabled" class="layui-input"  autocomplete="off" placeholder="柴油计算结果">
      </div>
      
      <div class="layui-input-inline">
        <input type="text" id="gasoline" disabled="disabled" class="layui-input"  autocomplete="off" placeholder="汽油计算结果">
      </div>
      
    </div>
    <div class="layui-form-item">
    	<div style="color:red">导入说明：</div>
    	<div style="color:red">&ensp;&ensp;&ensp;&ensp;1.使用表格模板进行导入，表格xls格式。</div>
    	<div style="color:red">&ensp;&ensp;&ensp;&ensp;2.导入表格中柴油、汽油每个油品至少三条数据。</div>
  	</div>
    
</div>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  var upload = layui.upload;
  
  layui.use(['table', 'layer', 'upload','laydate'], function () {

    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gasFuelcharging/listByPage' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true},
          {field: 'batch', title: '批次', sort: true},
          {field: 'oilDeptName', title: '油站名称', sort: true},
          {field: 'oilEngineId', title: '油机编号', sort: true},
          {field: 'oilGunId', title: '油枪编号', sort: true},
          {field: 'monitoringId', title: '监控微处理器号', sort: true},
          {field: 'mainboardId', title: '主板内枪号', sort: true},
          {field: 'oilProducts', title: '油品', sort: true},
          {field: 'oilAmount', title: '油量', sort: true},
          {field: 'oilPrice', title: '单价', sort: true},
          {field: 'money', title: '金额', sort: true},
          {field: 'fuelchargingTime', title: '加油时间', sort: true},
          {field: 'field1', title: 'field1', sort: true},
          {field: 'field2', title: 'field2', sort: true},
          {field: 'field3', title: 'field3', sort: true},
          {field: 'field4', title: 'field4', sort: true},
          {field: 'field5', title: 'field5', sort: true},
          {field: 'deleted', title: '是否删除(1未删除；0已删除)', sort: true},
          {field: 'createId', title: '创建人', sort: true},
          {field: 'updateId', title: '更新人', sort: true},
          {field: 'createWhere', title: '创建来源(1.web 2.android 3.ios )', sort: true},
          {field: 'createTime', title: '创建时间', sort: true},
          {field: 'updateTime', title: '', sort: true},
          {width: 120, toolbar: "#tool", title: '操作'}
        ]
      ]
      , toolbar: '#toolbar'
    });


    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("新增");
          $(".operation input[name=id]").val("");
          $(".operation input[name=batch]").val("");
          $(".operation input[name=oilDeptName]").val("");
          $(".operation input[name=oilEngineId]").val("");
          $(".operation input[name=oilGunId]").val("");
          $(".operation input[name=monitoringId]").val("");
          $(".operation input[name=mainboardId]").val("");
          $(".operation input[name=oilProducts]").val("");
          $(".operation input[name=oilAmount]").val("");
          $(".operation input[name=oilPrice]").val("");
          $(".operation input[name=money]").val("");
          $(".operation input[name=fuelchargingTime]").val("");
          $(".operation input[name=field1]").val("");
          $(".operation input[name=field2]").val("");
          $(".operation input[name=field3]").val("");
          $(".operation input[name=field4]").val("");
          $(".operation input[name=field5]").val("");
          $(".operation input[name=deleted]").val("");
          $(".operation input[name=createId]").val("");
          $(".operation input[name=updateId]").val("");
          $(".operation input[name=createWhere]").val("");
          $(".operation input[name=createTime]").val("");
          $(".operation input[name=updateTime]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'edit':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("编辑");
          $(".operation input[name=id]").val(data.id);
          $(".operation input[name=batch]").val(data.batch);
          $(".operation input[name=oilDeptName]").val(data.oilDeptName);
          $(".operation input[name=oilEngineId]").val(data.oilEngineId);
          $(".operation input[name=oilGunId]").val(data.oilGunId);
          $(".operation input[name=monitoringId]").val(data.monitoringId);
          $(".operation input[name=mainboardId]").val(data.mainboardId);
          $(".operation input[name=oilProducts]").val(data.oilProducts);
          $(".operation input[name=oilAmount]").val(data.oilAmount);
          $(".operation input[name=oilPrice]").val(data.oilPrice);
          $(".operation input[name=money]").val(data.money);
          $(".operation input[name=fuelchargingTime]").val(data.fuelchargingTime);
          $(".operation input[name=field1]").val(data.field1);
          $(".operation input[name=field2]").val(data.field2);
          $(".operation input[name=field3]").val(data.field3);
          $(".operation input[name=field4]").val(data.field4);
          $(".operation input[name=field5]").val(data.field5);
          $(".operation input[name=deleted]").val(data.deleted);
          $(".operation input[name=createId]").val(data.createId);
          $(".operation input[name=updateId]").val(data.updateId);
          $(".operation input[name=createWhere]").val(data.createWhere);
          $(".operation input[name=createTime]").val(data.createTime);
          $(".operation input[name=updateTime]").val(data.updateTime);
          break;
      }
    });
	
 	// 导入
	upload.render({
		elem: '#import', //绑定元素
		url: '/gas/calculate/importDataCalculate?authorization='+tokenQuery, //上传接口
	    exts: 'xlsx|xls', //限制上传文件
		size:"20480",
		before: function(obj){
			layer.msg('文件计算中...', {
				icon: 16,
				shade: 0.01,
				time: 0
	  		})
	    },
	    done: function(res){
	    	if(res.code == "0"){
	    		$("#diesel").val("柴油计算结果:"+res.data[0].toFixed(2));
	    		$("#gasoline").val("汽油计算结果:"+res.data[1].toFixed(2));
	    		layer.msg("计算成功！");
			}else{
				layer.msg(res.msg);
			}
		},
		error: function(){
			layer.msg("文件上传失败，请稍后重试！");
		}
		
	});
	
  	// 模板下载
    $('#template').on('click', function () {
    	window.open('/files/gasstation/temp001.xls','_blank');
    });
    
    
    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/gasFuelcharging/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/gasFuelcharging/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
</script>